<template>

	<scroll-view scroll-y class="second-menu">
		<view v-if="active==0">
			<cuBar title="独立组件" hint="Modal" modal="3"></cuBar>
			<cu-grid :datas="elements" @onclick="onElements"></cu-grid>
		</view>
		<view v-else-if="active==1">
			<cuBar title="组合组件" hint="Modal" modal="3"></cuBar>
			<cu-grid :datas="elements1" @onclick="onElements1"></cu-grid>
		</view>
		<view v-else>
			<cuBar title="示例" hint="Modal" modal="3"></cuBar>
			<cu-grid :datas="elements2" @onclick="onElements2"></cu-grid>
		</view>
	</scroll-view>

</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import cuGrid from '@/components/single/grid/cu-grid.vue'
	import cuBar from '@/components/single/bar/cu-bar.vue';
	export default {
		components: {
			cuGrid,
			cuBar
		},
		data() {
			return {
				elements: [{
						title: '操作条',
						name: 'bar',
						color: 'cyan',
						cuIcon: 'newsfill'
					},
					{
						title: '卡片',
						name: 'card',
						color: 'blue',
						cuIcon: 'card'
					},
					{
						title: '按钮',
						name: 'button',
						color: 'red',
						cuIcon: 'btn'
					},
					{
						title: '气泡',
						name: 'chat',
						color: 'purple',
						cuIcon: 'font'
					},
					{
						title: '表单 ',
						name: 'from',
						color: 'mauve',
						cuIcon: 'cuIcon'
					},
					{
						title: '选择器',
						name: 'picker',
						color: 'pink',
						cuIcon: 'btn'
					},
					{
						title: '导航栏',
						name: 'nav',
						color: 'brown',
						cuIcon: 'tagfill'
					},
					{
						title: '步骤条',
						name: 'steps',
						color: 'red',
						cuIcon: 'myfill'
					},
					{
						title: '轮播',
						name: 'swiper',
						color: 'orange',
						cuIcon: 'icloading'
					},
					{
						title: '时间线',
						name: 'timeline',
						color: 'olive',
						cuIcon: 'copy'
					},
					{
						title: '网格',
						name: 'gridlist',
						color: 'green',
						cuIcon: 'cascades'
					},
					{
						title: '列表',
						name: 'list',
						color: 'red',
						cuIcon: 'list'
					},
					{
						title: '横幅',
						name: 'banner',
						color: 'orange',
						cuIcon: 'pic'
					},
					{
						title: '条目',
						name: 'cell',
						color: 'green',
						cuIcon: 'sort'
					},
					{
						title: '进度条',
						name: 'progress',
						color: 'brown',
						cuIcon: 'rankfill'
					},
					{
						title: '树状条',
						name: 'tree',
						color: 'pink',
						cuIcon: 'magic'
					},
					{
						title: '徽章',
						name: 'badge',
						color: 'blue',
						cuIcon: 'medal'
					},
					{
						title: '分页器',
						name: 'pagination',
						color: 'green',
						cuIcon: 'loading2'
					},
					{
						title: '抽屉',
						name: 'drawer',
						color: 'cyan',
						cuIcon: 'punch'
					}
				],
				elements1: [{
						title: '上传',
						name: 'upload',
						color: 'cyan',
						cuIcon: 'pullup'
					},
					{
						title: '模态框',
						name: 'modal',
						color: 'blue',
						cuIcon: 'send'
					},
					{
						title: '编辑框',
						name: 'editor',
						color: 'purple',
						cuIcon: 'edit'
					},
					{
						title: '地图 ',
						name: 'map',
						color: 'mauve',
						cuIcon: 'location'
					},
					{
						title: '表格',
						name: 'table',
						color: 'pink',
						cuIcon: 'text'
					},
					{
						title: '日历',
						name: 'calendar',
						color: 'brown',
						cuIcon: 'remind'
					},
					{
						title: '二维码',
						name: 'recode',
						color: 'red',
						cuIcon: 'qrcode'
					},
					{
						title: '海报',
						name: 'poster',
						color: 'orange',
						cuIcon: 'activity'
					},
					{
						title: '绘图',
						name: 'drawing',
						color: 'olive',
						cuIcon: 'colorlens'
					},
					{
						title: '图表',
						name: 'chart',
						color: 'green',
						cuIcon: 'rank'
					}
				],
				elements2: [{
					title: 'Diy页面',
					name: 'diypage',
					color: 'mauve',  
					cuIcon: 'copy'
				},{
						title: '网络请求',
						name: 'network',
						color: 'cyan',
						cuIcon: 'newsfill'
					},
					{
						title: '媒体播放',
						name: 'media',
						color: 'blue',
						cuIcon: 'card'
					},
					{
						title: '联动分类',
						name: 'classify',
						color: 'red',
						cuIcon: 'btn'
					},
					{
						title: '搜索页',
						name: 'search',
						color: 'purple',
						cuIcon: 'font'
					},
					{
						title: '分享海报 ',
						name: 'poster',
						color: 'mauve',
						cuIcon: 'cuIcon'
					},
					{
						title: '产品体验',
						name: 'experience',
						color: 'pink',
						cuIcon: 'btn'
					},
					{
						title: '签到活动',
						name: 'check-ins',
						color: 'brown',
						cuIcon: 'tagfill'
					},
					{
						title: '抽奖活动',
						name: 'lottery',
						color: 'red',
						cuIcon: 'myfill'
					},
					{
						title: '助力活动',
						name: 'cheating',
						color: 'orange',
						cuIcon: 'icloading'
					},
					{
						title: '商品活动',
						name: 'commodity',
						color: 'olive',
						cuIcon: 'copy'
					},
					{
						title: '用户相关',
						name: 'clients',
						color: 'green',
						cuIcon: 'cascades'
					},
					{
						title: '异常页面',
						name: 'errors',
						color: 'red',
						cuIcon: 'list'
					},
					{
						title: '个人中心',
						name: 'users',
						color: 'orange',
						cuIcon: 'pic'
					},
					{
						title: '商品相关',
						name: 'shops',
						color: 'green',
						cuIcon: 'sort'
					},
					{
						title: '消息相关',
						name: 'message',
						color: 'brown',
						cuIcon: 'rankfill'
					},
					{
						title: '联动列表',
						name: 'linkage',
						color: 'blue',
						cuIcon: 'medal'
					}
				]
			}
		},
		props: {
			matchLeftWindow: {
				type: Boolean
			}
		},

		computed: {
			...mapState({
				active: state => state.active,
			})
		},
		watch: {
			matchLeftWindow: {
				immediate: true,
				handler(newMatches) {
					this.setMatchLeftWindow(newMatches)
				}
			}
		},
		methods: {
			...mapMutations(['setMatchLeftWindow', 'setActive']),
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			},
			onElements: function(e) {
				console.log(e);
				this.$util.redirectTo('/pages/single/' + this.elements[e].name);
			},
			onElements1: function(e) {
				console.log(e);
				this.$util.redirectTo('/pages/group/' + this.elements1[e].name);
			},
			onElements2: function(e) {
				console.log(e);
				this.$util.redirectTo('/pages/home/' + this.elements2[e].name);
			}
		}
	}
</script>

<style>
	.left-window-style {
		min-height: calc(100vh - var(--top-window-height));
		background-color: #f8f8f8;
	}

	.second-menu {
		width: 350px;
		background-color: #F8F8F8;
		height: 100vh;
	}

	.icon-image {
		width: 30px;
		height: 30px;
	}
</style>
